//标签切换的另一个有效方法是每次将当前.content克隆到外套内部的最后位置并将它显示出来，其不必计算高度。
//当前tabbed方法仅仅提供切换功能，定时切换、滑动、上一个、下一个不在考虑之列。
@mixin tabbed-x($selector:'.tabbedX',$height:'',$count:5){
	//该模块必须提供一个明确的height值
	/* div.tabbedX>ul.group>li.item*5>a.heading+div.content */
	#{$selector}{ position:relative; height:300px; background:#fff; }
	#{$selector} .group{ display:block; margin:0; padding:0; margin-left:1px; }
	#{$selector} .item{ list-style:none; float:left; margin:0; padding:0; width:20%; }
	#{$selector} .item .heading{ display:block; _width:100%; margin:0; border:1px solid #ccc; background-color:#ddd;margin-left:-1px;  }
	#{$selector} .item.active .heading{ border-bottom-color:transparent; background-color:transparent; }
	#{$selector} .content{ display:none; position:absolute; top:30px; left:0;}
	#{$selector} .active .content{ display:block; }
	#{$selector}.jx{}
}
@mixin tabbed-y($selector:'.tabbedY',$height:'',$count:''){
	//该模块必须提供一个明确的height值
	/* div.tabbedY>ul.group>li.item*5>a.heading+div.content */
	#{$selector}{ position:relative; height:270px; background:#dedede; }
	#{$selector} .group{ display:block; height:270px; margin:0; padding:0; margin-top:0px; margin-top:1px; }
	#{$selector} .item{ display:block;list-style:none; float:none; margin:0; margin-top:-1px; padding:0; width:48px; height:53px; border:1px solid #ccc; }
	#{$selector} .item .heading{ display:block; *display:inline-block; *width:48px; height:53px; margin:0; margin-top:0px; }//关键点：display:inline-block; width;
	#{$selector} .item.first{ height: 52px;}
	#{$selector} .item.first .heading{ height: 52px; }
	#{$selector} .item.active{ border-right-color:#fff; }
	#{$selector} .item.active .heading{ background-color:#fff; }
	#{$selector} .content{ display:none; position:absolute; top:0; left:50px; }
	#{$selector} .active .content{ display:block; }
	#{$selector}.jx{}
}
@mixin clone-tabbed-x(){

}
@mixin clone-tabbed-y(){
	
}
@mixin section0($selector:'.section',$bdc:#e9e9e9){
	#{$selector}{ position:relative; font-size:12px; line-height:normal; border:1px solid $bdc; background:#fff; *zoom:1;}
	#{$selector} .heading{ margin:0; padding:10px 0 8px 12px; font-size:12px; border:1px solid #fff; color:#333; background:#f7f7f7;}
	#{$selector} .content{ padding:10px 12px; border-top:1px solid $bdc; color:#666;}
	#{$selector} .more{ position:absolute; top:9px; right:12px; color:#656565; font:11px Dotum, Tahoma; text-decoration:none !important;}
	#{$selector} .more span{ color:#6e89aa; font:14px/1 Tahoma;}
}
@mixin section2(){

}
@mixin section3($head-img-h:30px,$foot-img-h:10px,$head-pt:0,$head-c){
	#{$selector}{ margin:10px; }
	#{$selector} .heading{
	background:url(/infobox/{ui_section:value}_head.gif) no-repeat; margin:0; padding:0;
	padding-top:$head-pt;
	padding-left:15px;
	height:$head-img-h - $head-pt;
	line-height:$head-img-h - $head-pt;
	color:$head-c;
	font-size:13px;
	}
	#{$selector} .content{background:url(/infobox/{ui_section:value}_body.gif) repeat-y;padding-top:10px;padding-bottom:10px;}
	#{$selector} .content ul{margin:0 !important;padding-left:15px !important;}
	#{$selector} .content ul li{background:url(/infobox/{ui_section:value}_arw.gif) 0 4px no-repeat;padding-left:15px !important;line-height:1.5em;}
	#{$selector} .content ul li a{color:#7D7D7D;}
	#{$selector} .blank{background:url(/infobox/{ui_section:value}_footer.gif) no-repeat;height:$foot-img-h;}
	#{$selector} li{ list-style:none; font-size:12px; font-family:dotum; }
}

@include tabbed-x();
@include tabbed-y();
